<template>
    <div class="d-flex">
        <el-aside width="20%" class="plr-4">
            <div class="plr-4">
                <div class="app_card pt-4" style="height:calc(100vh - 150px);overflow-y: scroll;">
                    <!--            @node-click="onClickNode"-->
                    <el-tree-select v-model="value" :data="dataOfTeachers" :filterMethod="filterMethod" filterable
                        placeholder="请输入教师名称"></el-tree-select>
                </div>
            </div>
        </el-aside>
        <div class="main-container" width="80%" height="calc(100vh - 190px)">
            <div class="app_card mb-2 pt-4  pb-4">
                <!-- 权限 -->
                <!-- v-if="authStore.hasCode('SysConfigs.save')" -->
                <div class="d-flex justify-content-between">
                    <div class="flex-grow-1">
                        <el-select class="w200px mr-3" v-model="queryParam.campusId" placeholder="请选择">
                            <el-option label="2022年第一学期" :value="'1'" />
                            <el-option v-for="item in campusOption" :key="item.id" :label="item.Name" :value="item.id" />
                        </el-select>
                        <el-select class="w200px mr-3" v-model="queryParam.coureseId" placeholder="所有课程">
                            <el-option label="所有课程" :value="'1'" />
                            <el-option v-for="item in campusOption" :key="item.id" :label="item.Name" :value="item.id" />
                        </el-select>
                        <el-select class="w200px mr-3" v-model="queryParam.weekId" placeholder="所有周">
                            <el-option label="所有周" :value="'1'" />
                            <el-option v-for="item in campusOption" :key="item.id" :label="item.Name" :value="item.id" />
                        </el-select>
                        <el-select class="w200px mr-3" v-model="queryParam.evaId" placeholder="评课状态">

                            <el-option v-for="item in evaList" :key="item.id" :label="item.Name" :value="item.id" />
                        </el-select>
                        <el-select class="w200px mr-3" v-model="queryParam.bookId" placeholder="预约状态">
                            <el-option v-for="item in bookList" :key="item.id" :label="item.Name" :value="item.id" />
                        </el-select>
                        <el-button type="primary" @click="onSearch()">搜索</el-button>
                        <el-button type="primary" plain @click="onReset()">重置</el-button>
                    </div>
                </div>
            </div>

            <div class="app_card pt-4 " width="80%">
                <el-table stripe size="large" :data="dataOfTable" height="calc(100vh - 280px)">
                    <el-table-column label="周次" prop="id" align="center" minWidth="100">
                        <template #default="scope">{{ scope.row.week }}</template>
                    </el-table-column>
                    <el-table-column label="日期" prop="building" align="center" show-overflow-tooltip minWidth="100">
                        <template #default="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column label="星期" prop="floor" align="center" show-overflow-tooltip minWidth="100">
                        <template #default="scope">{{ scope.row.weekDay }}</template>
                    </el-table-column>
                    <el-table-column label="课节" prop="room" align="center">
                        <template #default="scope">{{ scope.row.course }}</template>
                    </el-table-column>
                    <el-table-column label="教室" prop="name" align="center" show-overflow-tooltip minWidth="100">
                        <template #default="scope">{{ scope.row.room }}</template>
                    </el-table-column>
                    <el-table-column label="课程" prop="brand" align="center" show-overflow-tooltip minWidth="100">
                        <template #default="scope">{{ scope.row.courseL }}</template>
                    </el-table-column>
                    <el-table-column label="出勤人数" prop="model" align="center" show-overflow-tooltip minWidth="100">
                        <template #default="scope">{{ scope.row.person }}</template>
                    </el-table-column>
                    <el-table-column label="出勤率" prop="group" align="center" show-overflow-tooltip minWidth="100">
                        <template #default="scope">
                            {{ scope.row.personRate }}
                        </template>
                    </el-table-column>
                    <el-table-column label="评课状态" prop="purchasingDate" align="center" show-overflow-tooltip minWidth="100">
                        <template #default="scope">

                            <span v-if="scope.row.evaStatus === 1" style="color: #0DB895;"> 已评课 </span>
                            <span v-if="scope.row.evaStatus === 2" style="color: #FF9600;"> 待评课</span>
                            <span v-if="scope.row.evaStatus === 3" style="color: #D1D2DA;"> 进行中 </span>
                            <span v-if="scope.row.evaStatus === 4" style="color: #494d70;"> 未开始 </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="预约状态" prop="serviceLife" align="center" show-overflow-tooltip minWidth="100">
                        <template #default="scope">{{ scope.row.bookStatus === 1 ? '已预约' : '--' }}</template>
                    </el-table-column>
                    <el-table-column label="得分" prop="purchasingDate" width="180">
                        <template #default="scope">
                            {{ scope.row.scores ? scope.row.scores : '--' }}
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="160" align="center">
                        <template #default="scope">
                            <el-button v-if="scope.row.evaStatus === 1 && scope.row.bookStatus === 1" link type="primary"
                                @click="onCheck(scope.row)">查看</el-button>
                            <el-button v-if="scope.row.evaStatus === 2 && scope.row.bookStatus === 1" link type="primary"
                                @click="onCheck(scope.row)">评分</el-button>
                            <el-button v-if="scope.row.evaStatus === 3 && scope.row.bookStatus !== 1" link type="primary"
                                @click="bookChange(scope.row)">预约</el-button>
                            <el-button v-if="scope.row.evaStatus === 4 && scope.row.bookStatus === 1" link type="primary"
                                @click="bookChange(scope.row)">取消预约</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="mt-2">
                    <el-pagination background v-model:currentPage="queryParam.page" v-model:page-size="queryParam.pageSize"
                        :page-sizes="paginationOption.pageSizes" :background="false" :layout="paginationOption.layout"
                        :total="paginationOption.total" @size-change="handleChangeSize"
                        @current-change="handleChangeCurrent" />
                </div>
            </div>

        </div>


        <EditDialog ref="editDialogRef" @success="loadData()"></EditDialog>
    </div>
</template>

<script setup>
/**
 * 教室管理
 */
import { useRouter, useRoute } from "vue-router";

import { ref, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import useAuthStore from '@/stores/useAuthStore';
import { typeList, groupList } from '@/apis/model/EquipmentModel';
import { findValue } from '@/utils/EsCommon';

//组件
import EditDialog from './EditDialog.vue';
// ======================================================
//                      变量声明
// ======================================================
const router = useRouter();
const authStore = useAuthStore();
const value = ref()
const dataOfTeachers = [
    {
        value: '1',
        label: '计算机学院',
        children: [
            {
                value: '1-1',
                label: '计算机科学与技术01',
                children: [
                    {
                        value: '1-1-1',
                        label: '张三',
                    },
                    {
                        value: '1-1-2',
                        label: '李四',
                    },
                    {
                        value: '1-1-3',
                        label: '王二',
                    },
                ],
            },
            {
                value: '1-1',
                label: '计算机科学与技术01',
                children: [
                    {
                        value: '1-1-1',
                        label: '张三',
                    },
                    {
                        value: '1-1-2',
                        label: '李四',
                    },
                    {
                        value: '1-1-3',
                        label: '王二',
                    },
                ],
            },
            {
                value: '1-2',
                label: '计算机科学与技术02',
                children: [
                    {
                        value: '1-2-1',
                        label: '张三',
                    },
                    {
                        value: '1-2-2',
                        label: '李四',
                    },
                    {
                        value: '1-2-3',
                        label: '王二',
                    },
                ],
            },
            {
                value: '1-3',
                label: '计算机科学与技术03',
                children: [
                    {
                        value: '1-3-1',
                        label: '张三',
                    },
                    {
                        value: '1-3-2',
                        label: '李四',
                    },
                    {
                        value: '1-3-3',
                        label: '王二',
                    },
                ],
            },
        ],
    },
    {
        value: '2',
        label: '建筑工程学院',
        children: [
            {
                value: '2-1',
                label: '工程技术',
                children: [
                    {
                        value: '2-1-1',
                        label: '赵六',
                    },
                ],
            },
            {
                value: '2-2',
                label: '建筑技术',
                children: [
                    {
                        value: '2-2-1',
                        label: '李云龙',
                    },
                ],
            },
        ],
    },
    {
        value: '3',
        label: '设计学院',
        children: [
            {
                value: '3-1',
                label: '设计技术',
                children: [
                    {
                        value: '3-1-1',
                        label: '赵四',
                    },
                ],
            },
            {
                value: '3-2',
                label: '视觉传达',
                children: [
                    {
                        value: '3-2-1',
                        label: '楚云飞',
                    },
                ],
            },
        ],
    },
]
const data = ref(dataOfTeachers)
const filterMethod = (value) => {
    data.value = [...dataOfTeachers].filter((item) => item.label.includes(value))
}
// 评课状态
const evaList = ref([
    {
        id: '1',
        Name: '已评课'
    },
    {
        id: '2',
        Name: '待评课'
    },
    {
        id: '3',
        Name: '进行中'
    },
    {
        id: '4',
        Name: '未开始'
    },
])
const bookList = ref([
    {
        id: '1',
        Name: '已预约'
    },
    {
        id: '2',
        Name: '未预约'
    }
])
// 组件引用
const editDialogRef = ref(null);

const typeOption = ref(typeList);
const grouOption = ref(groupList);
// 表格数据
const dataOfTable = ref([]);
// 表格查询参数
const queryParam = ref({
    campusId: '1',
    coureseId: '1',
    weekId: '1',
    evaId: '',
    bookId: '',
    q: '',
    search: '',
    orderby: '',
    group_id: 0,
    page: 1,
    pageSize: 10,
})
// 分页栏配置数据
const paginationOption = ref({
    layout: 'total, sizes, prev, pager, next, jumper',
    pageSizes: [10, 20, 50, 100, 500, 1000],
    total: 0,
})
const radioFloor = ref('-1');

//
// ======================================================
//                      处理事件
// ======================================================

const floorChange = () => {
    if (radioFloor.value == "-2") {//上课
    } else if (radioFloor.value == "-3") {//故障教室
    } else if (radioFloor.value == "-1") {//全部
    } else {

    }
}
const fontDatas = (row) => {
    //console.log(row)
    var nowTime = row;
    var thisTime = nowTime;
    thisTime = thisTime.replace(/-/g, "/");
    var time = new Date(thisTime);
    time = time.getTime();
    var time_stamp = Date.parse(new Date());
    return parseInt(
        ((time_stamp - time) / 1000 / 60 / 60 / 24 / 30 / 36) * 100
    );
}


// 点击新增按钮
const onAdd = (row = null) => {
    if (row) {
        editDialogRef.value.show(0, "新增" + row.title, row);
        return;
    }
    editDialogRef.value.show(0, "新增");
}


// 点击快速搜索按钮
const onSearch = (param) => {
    queryParam.value.page = 1;
    queryParam.value.q = param;

    loadData();
}
const onReset = () => {
    queryParam.value = {}
    loadData();
}


// 点击跳转
const onCheck = (row) => {
    router.push({ path: '/tourvideo', query: { id: row.id } })

}


// 处理分页尺寸
const handleChangeSize = (val) => {
    console.log(`${val} items per page`);
    queryParam.value.page = 1;
    queryParam.value.pageSize = val;
    loadData();
}

// 处理页码
const handleChangeCurrent = (val) => {
    console.log(`current page: ${val}`)
    queryParam.value.page = val;
    loadData();
}

// ======================================================
//                      处理事件
// ======================================================

const loadData = () => {
    // EsAjax.post(ApiUrls.equipmentDatagrid, queryParam.value).then(res => {
    //   if (res.data.code !== 200) {
    //     ElMessage.warning(res.data.msg);
    //     return;
    //   }
    //   console.log(res.data.data)
    //   dataOfTable.value = res.data.data.data;
    //   paginationOption.value.total = res.data.data.total;
    // }).catch(err => {
    //   ElMessage.error(err.message);
    // })
    dataOfTable.value = [
        {
            id: 1,
            week: '第一周',
            date: '2023年12月15日',
            weekDay: '周一',
            course: '第1节',
            room: 'YG09-103',
            courseL: '高数-第几讲',
            person: '20',
            personRate: '50%',
            evaStatus: 1,
            bookStatus: 1,
            scores: 90
        },
        {
            id: 2,
            week: '第一周',
            date: '2023年12月15日',
            weekDay: '周一',
            course: '第1节',
            room: 'YG09-103',
            courseL: '高数-第几讲',
            person: '20',
            personRate: '50%',
            evaStatus: 2,
            bookStatus: 1,
            scores: 90
        },
        {
            id: 3,
            week: '第一周',
            date: '2023年12月15日',
            weekDay: '周一',
            course: '第1节',
            room: 'YG09-103',
            courseL: '高数-第几讲',
            person: '20',
            personRate: '50%',
            evaStatus: 3,
            bookStatus: 0,
            scores: 90
        },
        {
            id: 4,
            week: '第一周',
            date: '2023年12月15日',
            weekDay: '周一',
            course: '第1节',
            room: 'YG09-103',
            courseL: '高数-第几讲',
            person: '20',
            personRate: '50%',
            evaStatus: 4,
            bookStatus: 1,
            scores: 90
        },
    ]
}


onMounted(() => {
    loadData();
})

</script>
<style lang="less" scoped>
:deep(.el-progress-bar__inner) {
    background-color: #ffbb00;
}

:deep(.el-aside) {
    padding: 0 !important;
    margin-right: 15px;

}

.main-container {
    // flex: 0.8;
    flex: 1;
}



:deep(.el-select-dropdown__wrap) {
    max-height: 800px;
}
</style>

